<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <div class="Mall4j store-list-components">
    <template v-if="config.storeList && config.storeList.length > 0">
      <div
        v-for="(item, index) in config.storeList"
        :key="index"
        class="store-list-items"
      >
        <div class="images">
          <el-image
            :src="checkFileUrl(item.shopLogo)"
            fit="fill"
          >
            <template #error>
              <div class="image-slot">
                <img
                  style="width: 100%"
                  src="@/assets/img/def.png"
                  alt
                >
              </div>
            </template>
          </el-image>
          <!-- 下线蒙版 start-->
          <div
            v-if="item.shopStatus !== 1"
            class="imgs_shelves"
          >
            <img
              class="been_imgs"
              src="@/assets/images/offlined.png"
              alt
            >
          </div>
          <!-- 下线蒙版 end -->
        </div>
        <div class="right-content">
          <span>{{ item.shopName }}</span>
          <span>{{ item.shopFocusNumber }}人关注</span>
          <span @click="hanldeClick(item)">进店看看</span>
        </div>
      </div>
    </template>
    <template v-else>
      <template
        v-for="index in defaultArr.length"
        :key="index"
      >
        <div

          class="store-list-items"
        >
          <div class="images">
            <el-image
              src=""
              fit="cover"
            >
              <template #error>
                <div class="image-slot">
                  <el-icon
                    style="font-size: 30px;color: rgba(220, 223, 230, 0.39);"
                    class="el-icon-picture-outline"
                  >
                    <Picture />
                  </el-icon>
                </div>
              </template>
            </el-image>
          </div>
          <div class="right-content">
            <span>店铺名称</span>
            <span>0人关注</span>
            <span>进店看看</span>
          </div>
        </div>
      </template>
    </template>
  </div>
</template>
<script setup>
import { ElMessage } from 'element-plus'
import { checkFileUrl } from '@/utils/index.js'

defineProps({
  config: { // 配置店铺
    type: Object,
    default: () => {
      return {
        storeList: []
      }
    }
  }
})

const defaultArr = new Array(4)

const router = useRouter()
// 进店看看
const hanldeClick = (item) => {
  if (item.shopStatus !== 1) {
    return ElMessage.warning('该店铺已下线')
  }
  router.push({
    path: '/shop-index',
    query: {
      sid: item.shopId
    }
  })
}

</script>
<style lang="scss" scoped>
@use "index";
</style>
